<template>
	<view class="user-promote-order">
		<view class="tabs">
			<view class="tabs-item" :class="{'active':item.id == currTab.id}" v-for="item in tabList" :key="item.id"
				@click="chageTab(item)">
				<template v-if="item.id == 0">
					<text>{{currAgent.name || item.name}}</text>
					<u-icon class="ml10" size="24" :name="selectShow?'arrow-up':'arrow-down'"></u-icon>
				</template>
				<template v-else>
					{{item.name}}
				</template>
			</view>
		</view>

		<order-item class="mt20" v-if="currTab" mode="revenue_list" :agent="currAgent" :type="currTab.id"></order-item>

		<agent-poup-choose-vue v-model="selectShow" :loadFunc="loadFunc" :curr-data="currAgent"
			@change-curr-data="e=>currAgent=e"></agent-poup-choose-vue>
	</view>
</template>

<script>
	import {
		agentOrderIds
	} from "@/utils/type";
	import {
		getAgentList
	} from "@/api/user";
	import orderItem from "../../components/order-item/index.vue"
	import agentPoupChooseVue from "../../components/agent-poup-choose/agent-poup-choose.vue";
	const _tabList = [{
			name: "全部",
			id: 0,
		},
		// {
		// 	name: "已结算",
		// 	id: 1,
		// }, {
		// 	name: "未结算",
		// 	id: 2,
		// },
	];
	export default {
		components: {
			orderItem,
			agentPoupChooseVue
		},
		data() {
			return {
				tabList: _tabList,
				currAgent: null,
				currTab: _tabList[0],

				selectShow: false, //选择框显示

				loadFunc: getAgentList
			};
		},

		components: {

		},
		props: {},
		onReachBottom() {
			uni.$emit("REACH_BOTTOM")
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {},

		methods: {
			chageTab(tab) {
				if (tab.id != this.currTab.id) {
					this.currTab = tab;
				} else {
					if (tab.id == 0) {
						this.selectShow = true;
					}
				}
			}

		}
	};
</script>
<style lang="scss">
	.tabs {
		display: flex;
		width: 100%;
		height: 80rpx;
		background-color: white;

		.tabs-item {
			flex: 1;
			line-height: 80rpx;
			text-align: center;

			&.active {
				color: var(--primary-color);
			}
		}
	}
</style>